<!-- 首页 -->
<template>
	<view class="">
		<!-- 标题 -->
		<shopro-navbar back-icon-color="#020202" :background="{background:'#fff'}" @backHandler="goBack"
			:backTextStyle="{ color: '#020202', fontSize: '36rpx', fontWeight: '400' }" :isBack="true">
			<view slot="content" class="u-flex nav-wrap" style="margin: auto">
				{{title}}
			</view>
		</shopro-navbar>
		<view v-if="type!=1" style="background: #fff;padding: 5px;margin-bottom: 20rpx">
			<u-search margin="15rpx 30rpx" placeholder="搜索" height="64" @custom="onSearch" @search="onSearch"></u-search>
		</view>
		<view class="goods-tit u-flex u-flex-nowrap">
			<!-- <u-section title="产业项目" sub-title="更多"></u-section> -->
			<view class="u-flex u-row-center u-col-center second-item" v-for="(item,index) in secondsCateList" :class="activeChoose==index?'active':''" @click="chooseSecond(item,index)">
				{{item.type_name}}
			</view>
		</view>
		<view class="flex goods-box">
			<view class="mt10 goods-item" v-if="list&&list.length>0" v-for="(item, index) in list"
				@click="goodsdetail(item.id)">
				<view class="bga box bg">
					<image :src="item.image" mode="" style="width: 100%;height: 200rpx;"></image>
					<view style="display: flex; align-items: center; line-height: 30px" class="f16">
						<view class="lianghang c3" style="padding-right: 10px">
							{{ item.project_name }}
						</view>
						<view style="margin-left: auto" @click.stop="profav(item.id)">
							<u-icon v-if="item.is_fav==0" name="star" size="30"></u-icon>
							<u-icon v-else color="#ffe413" name="star-fill" size="30"></u-icon>
						</view>
					</view>
					<view class="f14 c6 lianghang ">
						<view class="goodsCont" v-html="item.project_desc">

						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadingType" margin-top="20"></u-loadmore>
		<view style="text-align: center;" class="xm" @click="handleJect">
			<view>
				<image src="@/static/xm.png" style="width: 30px;height: 30px;margin-top: 15px;" mode=""></image>
			</view>
			我有项目
		</view>
		<!-- <u-sticky>
			
		</u-sticky> -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				type: '',
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				scrollTop: 0,
				id: '',
				seconId:'',
				page: 1, //分页加载
				loadingType: 'more', //加载更多状态
				list: [],
				title: '',
				activeChoose:'null',
				secondsCateList:[],
				searchval:''
			};
		},
		onLoad(options) {
			console.log(options, 'title')
			this.id = options.id
			this.type = options.type
			this.title = uni.getStorageSync('project_name')
			this.getSecondsCateList();
			this.getList()
		},

		onShow() {
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		//加载更多
		onReachBottom() {
			this.getList();
		},
		methods: {
			getList(type = 'add', loading) {
				debugger
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else if (type === 'refresh') {
					this.loadingType = 'loading';
					this.page = 1;
					this.list = [];
				} else {
					this.loadingType = 'more';
				}
				let formData = {
					page:this.page,
					limit: 10,
					category: this.seconId?this.seconId:this.id,
					search: this.searchval ? this.searchval : ''
				}
				console.log(formData, 'formData')
				this.$http("project.list", formData).then((res) => {
					console.log(res, 'list')
					if (res.code === 1) {
						let projectList = res.data.data;
						this.list = this.list.concat(projectList);
						this.loadingType = res.data.current_page >= res.data.last_page ? 'nomore' : 'more';
					}
				});
			},
			getSecondsCateList() {
				let data = {
					pid: this.id,
				}
				console.log(data, 'data')
				this.$new_http("project.getCategory", data).then((res) => {
					console.log(res, 'list')
					if (res.code === 1) {
						this.secondsCateList = res.data;
					}
				});
			},
			chooseSecond(e,index){
				this.seconId = e.id;
				this.activeChoose = index;
				this.loadingType = 'more'
				this.page = 1;
				this.list = [];
				this.getList("add","refresh");
			},
			onSearch(e) {
				this.searchval = e;
				console.log(e)
				this.getList();
			},
			handleJect() {
				uni.navigateTo({
					url: '/pages/index/projectProp/index?isvip=' + this.userInfo.is_vip + '&type=' + 0
				})
			},
			goodsdetail(e) {
				uni.navigateTo({
					url: "/pages/index/project_list/detail?id=" + e,
				});
			},
			profav(id) {
				uni.request({
					url: this.base_url+'/api/info/profav',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						token: uni.getStorageSync('token')
					},
					data: {
						project_id: id
					},
					success: res => {
						console.log(res);
						if (res.data.code == 1) {
							this.getList()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.xm {
		width: 70px;
		height: 70px;
		background: linear-gradient(180deg, #F7BB42 0%, #ED861F 100%);
		box-shadow: 0px 0px 8px 0px rgba(131, 86, 37, 0.2);
		position: fixed;
		bottom: 80px;
		right: 10px;
		font-size: 12px;
		color: #fff;
		z-index: 1;
		border-radius: 50%;
	}

	.xm image {
		width: 20px !important;
		height: 20px !important;
	}


	.goods-tit {
		background: #fff;
		padding: 30rpx 0;
		overflow-x: scroll;
		.second-item{
			padding: 10rpx 20rpx;
			color:#333333;
			min-width: 156rpx;
		}
		.active{
			color: #faae0c;
			position: relative;
			&:after{
				content: "";
				position: absolute;
				bottom: -8rpx;
				width: 50%;
				height: 4rpx;
				background: #faae0c;
			}
		}
		
	}

	.goods-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 16rpx 30rpx;
		background: #fff;
	}

	.goods-item {
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
		padding: 20rpx;
		border-radius: 20rpx;
		width: 48%;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.goodsCont {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.c3 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>